<template>
  <div class="confirm">
    <div class="site">
        <div>姓名:{{obj.username}}</div>
        <div>手机:{{obj.userphone}}</div>
        <div>地址:{{obj.location}}</div>
        <div v-if="!obj"><button class="btn" @click="toSite">新增地址</button></div>
        <div v-else><button class="btn" @click="toSite">修改地址</button></div>
    </div>
    <div v-for="item in list" :key="item.id">
      <van-card
        :num="item.num"
        :price="item.price"
        desc="描述信息"
        :title="item.goodsname"
        :thumb="$pre+item.img"
      />
    </div>
    <div>
      <p class="clearfix">
        <span class="fl">发票类型</span>
        <span class="fr">不开发票</span>
      </p>
      <p class="clearfix">
        <span class="fl">售后免邮</span>
        <span class="fr">部分商家赠送</span>
      </p>
    </div>
    <div>
      <p class="clearfix">
        <span class="fl">商品金额</span>
        <span class="fr">￥200</span>
      </p>
      <p class="clearfix">
        <span class="fl">优惠活动</span>
        <span class="fr">-￥200</span>
      </p>
      <p class="clearfix">
        <span class="fl">优惠券</span>
        <span class="fr">更多优惠券</span>
      </p>
    </div>
    <div>
      <van-submit-bar :price="sum*100" button-text="确认订单" @submit="onSubmit" />
    </div>
  </div>
</template>

<script>
import { reqAddressList, reqOrderAdd, reqShopList } from "../../../http/api";
export default {
  data() {
    return {
      //1.地址详情
      obj: {},
      //3.购物车
      list: [],
      sum:0
    };
  },
  mounted() {
    // 2.如果有地址，就取地址
      reqAddressList({
        uid: JSON.parse(localStorage.getItem("user")).uid,
        id: 1
      }).then(res => {
          this.obj = res.data.list[0];
          console.log(this.obj);
      });

    //5.请求购物车的数据
    let idstr = JSON.parse(localStorage.getItem("order")).idstr; // '15,14'
    idstr.split(",").forEach(item => {
      //item :15
      reqShopList({
        uid: JSON.parse(localStorage.getItem("user")).uid,
        id: item
      }).then(res => {
        this.list.push(res.data.list[0]);
      });
    });
    this.sum=JSON.parse(localStorage.getItem("order")).countmoney
  },
  methods: {
    //6.下单
    onSubmit() {
      let json = JSON.parse(localStorage.getItem("order"));
      //生成订单
      reqOrderAdd({
        uid: JSON.parse(localStorage.getItem("user")).uid,
        addressid: 1,
        ...json
      }).then(res => {
        this.$router.push("/order?orderId=" + res.data.list.outTradeNo);
      });
    },
    toSite(){
        this.$router.push("/site")
    }
  }
};
</script>

<style scoped>
.btn{
    padding: 0.1rem 0.2rem;
    background: green;
    border-radius: 0.2rem;
    color: white;
}
.site{
    background-color: white;
    border-radius: 0.3rem;
    padding: 0.3rem 0;
}
.site>div{
    padding: 0.1rem 0;
    text-align: center;
}
.confirm {
  background-color: rgba(220, 220, 220, 0.705);
  margin-bottom: 1rem;
}
.confirm > div {
  margin: 0.6rem auto;
  width: 80vw;
  font-size: 0.28rem;
}
.confirm > div > p {
  background-color: white;
  margin: 0.4rem 0;
  padding: 0.3rem 0.2rem;
  border-radius: 0.2rem;
}
</style>